<script>
import request from "../../utils/request";

export default {
  name: "detail",
  data() {
    return {
      articlesId: "", //文章id
      detail: null, //文章详情
    };
  },
  onLoad(query) {
    this.articlesId = query.articlesId;
    //获取资讯文章详情
    request({
      url: "inforArticles/getArticlesDetails",
      data: {
        articlesId: this.articlesId,
      },
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.detail = data;
      //设置页面的标题
      uni.setNavigationBarTitle({
        title: this.detail.articlesTitle,
      });
      console.log(this.detail, "this.detail");
    });
  },
};
</script>

<template>
  <view class="page" v-if="detail">
    <!--		文章标题-->
    <view class="title">{{ detail.articlesTitle }}</view>
    <view class="info block">
      <!--		文章作者-->
      <view class="author">校务行 | 督学刷题</view>
      <!--			发布时间-->
      <view class="release-time">{{ detail.publishTime }}</view>
    </view>
    <!--		文章内容-->
    <view class="content block">
      <view v-html="detail.articlesContent"></view>
    </view>
    <view class="footer">
      <!--			阅读量-->
      <view class="view-count">阅读量：{{ detail.readingValue }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: {
    top: 40rpx;
    left: 40rpx;
    right: 40rpx;
    bottom: calc(40rpx + env(safe-area-inset-bottom));
  }
  > .title {
    font-size: 36rpx;
    font-weight: bold;
  }
  > .block {
    margin-top: 40rpx;
  }
  > .info {
    display: flex;
    font-size: 30rpx;
    > .author {
      color: var(--text-color-theme);
      margin-right: 30rpx;
    }
    > .release-time {
      color: var(--text-color-light);
    }
  }
  > .content {
  }
  > .footer {
    margin-top: 60rpx;
    .view-count {
      color: var(--text-color-light);
      font-size: 30rpx;
    }
  }
}
</style>
